<!--
 * @Description: 
 * @Author: william
 * @Date: 2024-08-22 16:22:53
 * @LastEditors: william
 * @LastEditTime: 2025-11-10 16:14:24
-->
<template>
  <view
    class="nav-bar-wrap"
    :style="{
      position: isFixed ? 'fixed' : 'relative'
    }"
    :="$attrs"
  >
    <view
      v-if="isStatusBar"
      class="status-bar"
      :style="{
        height: statusBarHeight + 'px',
        backgroundColor: statusBarBgColor
      }"
    />
    <view
      class="nav-bar"
      :style="{
        backgroundColor: backgroundColor,
        'box-shadow': isBorder ? '0 1rpx 4rpx rgba(0, 0, 0, 0.1)' : 'none'
      }"
    >
      <view class="nav-bar-left">
        <view v-if="isBack" class="nav-bar-left-icon" @click="handleBack">
          <uni-icons
            :type="newLeftIcon"
            :color="leftIconColor"
            :size="leftIconSize"
          />
        </view>
      </view>
      <view
        class="nav-bar-title"
        :style="{
          color: color
        }"
      >
        {{ title }}
      </view>
      <view class="nav-bar-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
defineOptions({
  name: 'PageTitle',
  inheritAttrs: false
})

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  isFixed: {
    type: Boolean,
    default: false
  },
  isStatusBar: {
    type: Boolean,
    default: true
  },
  statusBarBgColor: {
    type: String,
    default: '#fff'
  },
  backgroundColor: {
    type: String,
    default: '#fff'
  },
  color: {
    type: String,
    default: '#333'
  },
  isBack: {
    type: Boolean,
    default: false
  },
  leftIcon: {
    type: String,
    default: 'left'
  },
  leftIconColor: {
    type: String,
    default: '#333'
  },
  leftIconSize: {
    type: [String, Number],
    default: g_utils.rpxToPx(30) // 单位px，数值为rpx数值
  },
  isBorder: {
    type: Boolean,
    default: true
  }
})

const statusBarHeight = uni.getSystemInfoSync()?.statusBarHeight
const newLeftIcon = props.isBack ? props.leftIcon || 'left' : ''

const handleBack = _ => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.nav-bar-wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
}
.status-bar {
  width: 100%;
  background-color: #fff;
}
.nav-bar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 58rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  .nav-bar-left {
    position: absolute;
    left: 20rpx;
    top: 50%;
    transform: translateY(-50%);
  }
  .nav-bar-title {
    max-width: 600rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #333;
  }
  .nav-bar-right {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
